import React, { Component } from 'react';
import {Platform, StyleSheet, View,Image,TouchableOpacity} from 'react-native';
import { Container, Toast, Content, Form, Item, Input, Label,Button,Text,H2,Root,Icon } from 'native-base';
import * as Animatable from 'react-native-animatable';

const Dimensions = require("Dimensions");
const { width,height } = Dimensions.get("window");

export default class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showToast: false
    };
    this.login = this.login.bind(this)
  }
  login(){
     Toast.show({
        text: "密码错误!",
        buttonText: "确认",
        duration: 3000
        })
    }
  render() {
    return (
      <Root>
        <View style={styles.con}>
          <View style={styles.container}>
            {/* <Container> */}
              <Content>
                <View style={styles.header}>
                  <View style={styles.avatar}>
                    <Image source={require('../../image/图标.jpg')} style={{width:120,height:120,borderRadius:60}}></Image>
                  </View>
                  <View style={{marginTop:15,alignItems:'center'}}>
                    <H2 style={{color:'#00A8CF'}}>Welcom to Polestar</H2>
                    <Text style={{color:"#00cec9"}}>Sing in to continue</Text>
                  </View>
                </View>
                <Form>
                  <Item>
                  <Icon active name='user' type="AntDesign"  style={{color:'#00A8CF'}} />
                  <Input placeholder='用户名'/>
                  </Item>
                <View style={{height:20,width:width}}></View>

                  <Item>
                  <Icon active name='lock' type="AntDesign"  style={{color:'#00A8CF'}}/>
                  <Input placeholder='密码'/>
                  </Item>
                </Form>
                <View style={{height:60,width:width}}></View>
                <Button block  rounded onPress={this.login} style={{backgroundColor:'#00cec9'}}> 
                  <Text>登录</Text>
                </Button>
                <View style={{marginTop:15,justifyContent:'center',flexDirection: 'row',}}>
                  <Text style={{color:"#7f8c8d"}}>新用户?</Text>
                  <TouchableOpacity onPress={() => this.props.navigation.navigate('Details')}>
                    <Text style={{color:"#00cec9",marginLeft:10}}>点这里</Text>
                  </TouchableOpacity>
                </View>
              </Content>
            {/* </Container> */}
          </View>
      </View>
    </Root>
    );
  }
}
const styles = StyleSheet.create({
  con:{
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  container: {
    backgroundColor: '#fff',
    width:width-30,
    flex: 1,
  },
  header: {
   width:width-30,
   height:height/2.5,
   alignItems: 'center',
   justifyContent: 'center',

   
  },
  avatar:{
    width:120,
    height:120,
    borderRadius: 60,
    // borderColor: '#000',
    // borderWidth: 1,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});